/**
 * 仓库主文件
 */

// 引入 配置仓库的 函数
import { configureStore } from "@reduxjs/toolkit";

import { TypedUseSelectorHook, useSelector, useDispatch } from "react-redux";

// 引入切片文件, 默认引入的就是一个 reducer 函数
import countReducer from "./stores/count";
import todosReducer from "./stores/todos";

// 调用 configureStore, 并配置好 reducer 选项，返回的就是一个 store 对象
const store = configureStore({
  // 该 reducer 配置，类似于 combineReducers 的写法
  reducer: {
    // 顶层 state 的数据格式
    count: countReducer,
    todos: todosReducer,
  },
});

console.log(store.getState());

/**
 * 1. 通过 TS 中 typeof 获取到 函数的类型
 * 2. TS 提供了很多 泛型工具函数
 *    1. ReturnType           ReturnType<函数类型> => 函数的返回值类型
 */
// function hello(msg: string) {
//   return msg;
// }

// type AAA = typeof hello;

// type BBB = ReturnType<AAA>

// type CCC = typeof store.getState

// type DDD = ReturnType<CCC>

// function world() {
//   return {
//     name: '张胜男',
//     age: 18
//   }
// }

// type EEE = typeof world

// type FFFF = ReturnType<EEE>

// const a:FFFF = {
//   name: '',
//   age: 18
// }

// function Test(state: DDD) {
//   state.count.num
//   state.todos.raws
// }

// const world:AAA = (a: string) => {
//   return ''
// }

export type RootState = ReturnType<typeof store.getState>;
type AppDispatch = typeof store.dispatch;

/**
 * 自己定义一个 hook, 该 hook 中调用别人的 hook
 */
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
export const useAppDispatch: () => AppDispatch = useDispatch;

// 导出 store
export default store;
